<template>
  <div class="date-range-picker">
    <div class="van-picker__toolbar">
      <button type="button" class="van-picker__cancel" @click="timeOnCancel">取消</button>
      <div class="van-ellipsis van-picker__title">请选择时间范围</div>
      <button type="button" class="van-picker__confirm" @click="timeOnConfirm">确认</button>
    </div>
    <van-row>
      <van-col :span="12">
        <van-datetime-picker
          v-model="time1"
          type="date"
          title="开始时间"
          :min-date="startTimeMinDate"
          :max-date="startTimeMaxDate"
          :formatter="formatter"
          :show-toolbar="false"
          swipe-duration="0"
          @change="startTimeOnChange"
        />
      </van-col>
      <van-col :span="12">
        <van-datetime-picker
          v-model="time2"
          type="date"
          title="结束时间"
          :min-date="endTimeMinDate"
          :max-date="endTimeMaxDate"
          :formatter="formatter"
          :show-toolbar="false"
          swipe-duration="0"
          @change="endTimeOnChange"
        />
      </van-col>
    </van-row>
  </div>
</template>
<script>
import { formatTimes } from '@/libs/tool'
export default {
  model: {
    prop: 'dateRange',
    event: 'change'
  },
  props: {
    dateRange: {
      type: Array,
      default: () => {
        return []
      }
    },
    dateType: {
      type: String,
      default: 'yyyy-mm-dd'
    }
  },
  data() {
    return {
      dateRangeTemp: [],
      time1: new Date(),
      time2: new Date(),
      startTime: '',
      endTime: '',
      startTimeMinDate: new Date(1900, 0, 1),
      startTimeMaxDate: new Date(),
      endTimeMinDate: new Date(),
      endTimeMaxDate: new Date(),
      formatter: (type, val) => {
        if (type === 'year') {
          return `${val}年`
        } else if (type === 'month') {
          return `${val}月`
        }
        return `${val}日`
      }
    }
  },
  created() {
    if (this.dateType === 'yyyy-mm-dd') {
      this.formatter = (type, val) => {
        if (type === 'year') {
          return `${val}年`
        } else if (type === 'month') {
          return `${val}月`
        }
        return `${val}日`
      }
    }
    if (this.dateType === 'yyyy-mm') {
      this.formatter = (type, val) => {
        if (type === 'year') {
          return `${val}年`
        } else if (type === 'month') {
          return `${val}月`
        }
      }
    }
    // if (this.dateRange.length) {
    //   this.time1 = new Date(this.dateRange[0])
    //   this.time2 = new Date(this.dateRange[1])
    //   this.startTimeOnChange()
    // }
  },
  watch: {
    dateRange: {
      handler() {
        if (this.dateRange.length) {
        } else {
          this.timeOnCancel()
        }
      },
      deep: true
    },
    dateRangeTemp: {
      handler() {
        if (this.dateType === 'yyyy-mm') {
          this.$emit('change', [this.startTime.substring(0, 7), this.endTime.substring(0, 7)])
        }
        if (this.dateType === 'yyyy-mm-dd') {
          this.$emit('change', [this.startTime, this.endTime])
        }
      },
      deep: true
    }
  },
  methods: {
    // 开始时间
    startTimeOnChange() {
      this.startTime = formatTimes.formatDate(this.time1)
      this.endTimeMinDate = new Date(this.time1)
      this.$nextTick(() => {
        if (!this.endTime) {
          // 未选择结束日期，默认为今天
          this.time2 = new Date()
        } else if (this.endTime && new Date(this.endTime) > new Date(this.startTime)) {
          // 结束日期 && 结束日期 > 开始日期
          this.time2 = new Date(this.endTime)
        } else {
          // 结束日期 && 结束日期 < 开始日期 (结束日期设置未开始日期)
          this.time2 = new Date(this.startTime)
        }
        this.endTime = formatTimes.formatDate(this.time2)
      })
    },
    // 结束时间
    endTimeOnChange() {
      this.endTime = formatTimes.formatDate(this.time2)
    },
    // 根据时间范围搜索
    timeOnConfirm() {
      this.dateRangeTemp = [this.startTime, this.endTime]
    },
    // 清空选择
    timeOnCancel() {
      this.startTime = ''
      this.endTime = ''
      this.startTimeMinDate = new Date(1900, 0, 1)
      this.startTimeMaxDate = new Date()
      this.endTimeMinDate = new Date()
      this.endTimeMaxDate = new Date()
      this.dateRangeTemp = []
      this.$nextTick(() => {
        // 强制清空
        this.time1 = new Date()
        this.time2 = new Date()
      })
    }
  }
}
</script>
